<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Top</title>


<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
<script th:src="@{/js/jquery.js}"  ></script>
<script th:src="@{/js/bootstrap.min.js}" ></script>


<!-- <script type="text/javascript" src="../../../../js/jquery.js" ></script>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css"/>
<script src="static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> -->


<style>
	.container-fluid{
		height: 50px;
	}
	#welcome{
		padding: 15px;
		color: white;
		width: 500px;
	}
	.container-fluid #quit{
		position: absolute;
		width: 300px;
		right: -100px;
		top: 15px;
	}
	.container-fluid #quit a{
		color: white;
	}
	#welcome ul{
		padding: 0;
		list-style: none;
	}
	#welcome li{
		display: inline;
		margin: 0 10px;
	}
	#top .navbar{
		border-radius: 0;
	}
	.dropdown{
		padding: 0;
	}
	.title{
		background: rgb(48,54,67);
		color: white;
		margin: 0;
		height: 50px;
		margin-bottom: 20px;
	}
	.title p{
		font-weight:bolder ;
		font-size: large;
		text-align: center;
		padding: 10px;
	}
	.navbar{
		background-color:  rgb(48,54,67);
		border: none;
		width: 1255px;
		position: absolute;
		left: 280px;
	}
	
	a,a:hover,a:focus{
				color: black;
				text-decoration: none;
			}
			.panel-group {
				background-color:rgb(238,238,238);
				width: 280px;
				height: 753px;
				overflow-y: auto;
				margin: 0;
			}
			.panel-group .panel {
				background-color: white;
				border: none;
			}
			
			.panel-heading{
				border-top-left-radius: 0px; 
    			border-top-right-radius: 0px; 
			}
			.panel-default>.panel-heading {
				border: none;
				color: #ffffff;
				background-color: white;
			}
			.panel-default>.panel-heading>span{
				font-size: 10px;
			}
			.panel-default>.panel-heading:active,.panel-default>.panel-heading:hover{
				background-color: #4a8bc2;
			}
			.panel-default>.panel-heading>a:hover{
				text-decoration: none;
				background-color: #4a8bc2;
			}
			.panel-group .panel-heading+.panel-collapse>.panel-body {
				border: none;
			}
			.panel-body {
				padding: 0px;
			}
			.nav>li{
				padding: 1px 0px 0px 0px;
			}
			
			.nav>li>a{
				text-decoration: none;
				padding: 10px 10px ;
			}
			.nav>li>a:hover,.nav>li>a:focus{
				background-color: #505050;
			}
			.bgcolor{
				background-color: aliceblue;
			}
			.input-group{
				width: 500px;
				margin-top: 25px;
			}
			.caxun{
				width: 1000px;
				margin-top: 25px;
			}
			.cz button{
				margin: 20px 10px;
			}
			.employee{
				margin: 5px 20px;
			}
			.employee-menu{
				width:170px
			}
			.navbar-nav{
				position: relative;
				top: 5px;
			}
			.d1{
			font-size: large;
			}
</style>
</head>
<body>
	<div th:fragment="head" id="top">
	<nav class="navbar navbar-default" role="navigation" >
		<div class="container-fluid"> 
			<div id="welcome">
				<ul>
					<li>欢迎  <shiro:principal property="u_nickname"/></li>
					<li>部门：<shiro:principal property="d_name"/></li>
				</ul>
			</div>
			<div id="quit">
				<a href="/login">退出系统</a>
			</div>
		</div>
	</nav>
</div>
<div th:fragment="left" class="panel-group" id="panelContainer">
	<div class="title">
		<p>人事管理系统</p>
	</div>
			<div class="panel panel-default">
				<div id="header1" class="panel-heading" data-toggle="collapse" data-target="#sub1" data-parent="#panelContainer">
					<a href="#" class="d1">员工模块</a>
				</div>
				<div id="sub1" class="collapse panel-collapse">
					<div class="panel-body">	
						<ul class="nav">
							<li>
								<a href = "getUserList"><span>员工信息管理</span></a>
							</li>
							
						</ul>
					</div>
				</div>
			</div>
			<!--<div class="panel panel-default">
				<div id="sub2" class="collapse panel-collapse">
					<div class="panel-body">
						<ul class="nav">
							<li>
								<a href="getDepartmentList">部门管理</a>
								<a href="#">部门列表</a>
							</li>
						</ul>
					</div>
				</div>
			</div>-->
			<div class="panel panel-default">
				<div id="header2" class="panel-heading" data-toggle="collapse" data-target="#sub2" data-parent="#panelContainer">
					<a href="#" class="d1">部门管理</a>
				</div>
				<div id="sub2" class="collapse panel-collapse">
					<div class="panel-body">
						<ul class="nav">
							<li>
								<a href = "getDepartmentList"><span>部门列表</span></a>
							</li>
								

						</ul>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div id="header3" class="panel-heading" data-toggle="collapse" data-target="#sub3" data-parent="#panelContainer">
					<a href="#" class="d1">请假管理</a>
				</div>
				<div id="sub3" class="collapse panel-collapse">
					<div class="panel-body">
						<ul class="nav">
							<li>
								<a href="/holiday/holidayIndex">请假列表</a>
							</li>
							<li shiro:hasAnyRoles="leader,manager,admin">
								<a href="/holiday/checkHolidays">请假审核</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="panel panel-default" shiro:hasAnyRoles="leader,manager,admin">
				<div id="header4" class="panel-heading" data-toggle="collapse" data-target="#sub4" data-parent="#panelContainer">
					<a href="#" class="d1">奖惩管理</a>
				</div>
				<div id="sub4" class="collapse panel-collapse">
					<div class="panel-body">
						<ul class="nav">
							<li>
								<a href="/reward">奖惩列表</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div id="header5" class="panel-heading" data-toggle="collapse" data-target="#sub5" data-parent="#panelContainer">
					<a href="#" class="d1">报销管理</a>
				</div>
				<div id="sub5" class="collapse panel-collapse">
					<div class="panel-body">
						<ul class="nav">
							<li>
								<a href="/application">报销申请</a>
							</li>
							<li shiro:hasAnyRoles="leader,manager,admin">
								<a href="/showAllExpense">报销审核</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div id="header6" class="panel-heading" data-toggle="collapse" data-target="#sub6" data-parent="#panelContainer">
					<a href="#" class="d1">薪资管理</a>
				</div>
				<div id="sub6" class="collapse panel-collapse">
					<div class="panel-body">
						<ul class="nav">
							<li shiro:hasAnyRoles="leader,manager,admin">
								<a href="/salary/salaryIndex">薪资列表</a>
							</li>
							<li>
								<a th:href="@{'/salary/mysalarys?u_id='+${session.user.u_id}}" >我的薪资</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="panel panel-default" shiro:hasRole="admin">
				<div id="header7" class="panel-heading" data-toggle="collapse" data-target="#sub7" data-parent="#panelContainer">
					<a href="#" class="d1">角色管理</a>
				</div>
				<div id="sub7" class="collapse panel-collapse">
					<div class="panel-body">
						<ul class="nav">
							<li>
								<a href="/showAllUser">角色管理</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
</body>
<script>
	$(function() {
				$(".panel-heading").on("click", function(e) {
					var idLength = e.currentTarget.id.length;
					var index = e.currentTarget.id.substr(idLength - 1, idLength);
					$("#sub" + index).on('hidden.bs.collapse', function() {
						$(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-bottom");
						$(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-right");
					})
					$("#sub" + index).on('shown.bs.collapse', function() {
						$(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-right");
						$(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-bottom");
					})
				})	
			});
			$(".dropdown").mouseover(function(){
			$(this).children("ul").toggle();
			})
			$(".dropdown").mouseout(function(){
				$(this).children("ul").toggle();
			})
			

			
</script>
</html>